<script setup lang="ts">
import { PagePath } from '@/common/constants'

withDefaults(
  defineProps<{
    text: string[] | undefined
    type: 'recommend' | 'history'
  }>(),
  {
    type: 'recommend',
  },
)
</script>

<template>
  <!-- 推荐搜索组件 -->
  <view class="search">
    <text
      v-for="txt in text" :key="txt" class="search-text" :class="{
        'search-text--history': type === 'history',
      }" @click="() => goToPage(`${PagePath.SEARCH}?q=${txt}&type=projects`)"
    >
      {{ txt }}
    </text>
  </view>
</template>

<style scoped lang="scss">
.search {
  display: flex;
  gap: 20rpx;
  margin-block: 16rpx;
  padding-inline: 30rpx;
  flex-wrap: wrap;

  &-text {
    padding-block: 10rpx;
    padding-inline: 20rpx;
    background-color: $bg-white-opacity-5;
    color: $color-white;
    border-radius: 30rpx;
    font-size: $font-size-sm;

    &--history {
      color: $uni-text-color-grey;
      background-color: transparent;
    }
  }
}
</style>
